<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CNCS饰品分析系统 - 登录</title>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="/css/styles.css">
</head>

<body class="min-h-screen flex items-center justify-center p-4 relative">
<!-- 背景图片容器 -->
<div class="bg-container absolute inset-0 z-0 overflow-hidden">
  <div class="bg-image absolute inset-0 bg-cover bg-center"
       style="background-image: url('/img/img.jpg'); filter: blur(8px) brightness(0.7); transform: scale(1.05);">
  </div>
</div>

<div class="login-container relative z-10 max-w-md w-full mx-auto">
  <!-- 登录框 -->
  <div
          class="card bg-white/95 rounded-xl shadow-2xl overflow-hidden transition-all duration-300 hover:shadow-3xl hover:-translate-y-1">
    <div class="content-padding">
      <div class="logo-container">
        <i class="fa fa-gamepad logo-icon"></i>
      </div>
      <h2 class="title">CNCS饰品分析系统</h2>
      <p class="subtitle">登录您的账号</p>

      <!-- 用户类型选择 -->
      <div class="user-type-selection mb-6">
        <div class="flex items-center justify-center space-x-6">
          <label class="flex items-center cursor-pointer">
            <input type="radio" name="userType" value="user" checked class="form-radio">
            <span class="ml-2">普通用户</span>
          </label>
          <label class="flex items-center cursor-pointer">
            <input type="radio" name="userType" value="admin" class="form-radio">
            <span class="ml-2">系统管理员</span>
          </label>
        </div>
      </div>


      <!-- 错误提示 -->
      <c:if test="${not empty error}">
        <div class="error-box">
          <i class="fa fa-exclamation-circle"></i> ${error}
        </div>
      </c:if>
      <!-- 登录表单 -->
      <form method="post" action="/login">
        <!-- 隐藏的 userType 字段 -->
        <input type="hidden" name="userType" id="userTypeInput" value="user">

        <!-- 普通用户表单 -->
        <div id="user-form">
          <div class="form-group">
            <label for="username" class="form-label">用户名</label>
            <div class="input-container">
              <i class="fa fa-user input-icon"></i>
              <input type="text" id="username" name="username" class="form-input" placeholder="请输入您的用户名">
            </div>
          </div>

          <div class="form-group">
            <label for="password" class="form-label">密码</label>
            <div class="input-container">
              <i class="fa fa-lock input-icon"></i>
              <input type="password" id="password" name="password" class="form-input" placeholder="请输入您的密码">
            </div>
          </div>
        </div>

        <!-- 管理员表单 -->
        <div id="admin-form" class="hidden">
          <div class="form-group">
            <label for="admin-username" class="form-label">管理员账号</label>
            <div class="input-container">
              <i class="fa fa-user-secret input-icon"></i>
              <input type="text" id="admin-username" name="adminUsername" class="form-input" placeholder="请输入管理员账号">
            </div>
          </div>

          <div class="form-group">
            <label for="admin-password" class="form-label">管理员密码</label>
            <div class="input-container">
              <i class="fa fa-lock input-icon"></i>
              <input type="password" id="admin-password" name="adminPassword" class="form-input" placeholder="请输入管理员密码">
            </div>
          </div>
        </div>

        <!-- 错误提示 -->
        <c:if test="${not empty loginResult}">
          <div class="error-message">${loginResult}</div>
        </c:if>

        <!-- 提交按钮 -->
        <button type="submit" id="login-btn" class="btn btn-primary">
          <i class="fa fa-sign-in mr-2"></i>登录
        </button>
      </form>

      <div class="register-text">
        还没有账号? <a href="jsp/register.jsp" class="register-link">立即注册</a>
      </div>
    </div>
  </div>
</div>

<script>
  // 获取 DOM 元素
  const userTypeRadios = document.querySelectorAll('input[name="userType"]');
  const userForm = document.getElementById('user-form');
  const adminForm = document.getElementById('admin-form');
  const loginBtn = document.getElementById('login-btn');
  const userTypeInput = document.getElementById('userTypeInput');

  const usernameInput = document.getElementById('username');
  const passwordInput = document.getElementById('password');
  const adminUsernameInput = document.getElementById('admin-username');
  const adminPasswordInput = document.getElementById('admin-password');

  // 切换用户类型
  userTypeRadios.forEach(radio => {
    radio.addEventListener('change', function () {
      const selectedType = this.value;

      if (selectedType === 'user') {
        userForm.classList.remove('hidden');
        adminForm.classList.add('hidden');

        // 设置隐藏字段
        userTypeInput.value = 'user';

        // 设置正确的 name 属性
        usernameInput.name = 'username';
        passwordInput.name = 'password';
        adminUsernameInput.name = '';
        adminPasswordInput.name = '';

        loginBtn.innerHTML = '<i class="fa fa-sign-in mr-2"></i>登录';
      } else {
        userForm.classList.add('hidden');
        adminForm.classList.remove('hidden');

        userTypeInput.value = 'admin';

        // 设置正确的 name 属性
        usernameInput.name = '';
        passwordInput.name = '';
        adminUsernameInput.name = 'adminUsername';
        adminPasswordInput.name = 'adminPassword';

        loginBtn.innerHTML = '<i class="fa fa-sign-in mr-2"></i>管理员登录';
      }
    });
  });

  // 页面加载时触发一次 change 来确保初始状态正确
  window.addEventListener('DOMContentLoaded', () => {
    const defaultRadio = document.querySelector('input[name="userType"]:checked');
    if (defaultRadio) {
      defaultRadio.dispatchEvent(new Event('change'));
    }

    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.has('register') && urlParams.get('register') === 'success') {
      alert('注册成功，请登录！');
    }
  });
</script>

</body>

</html>
